<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱心志愿者平台 - 活动管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1E88E5',
                        secondary: '#388E3C',
                        accent: '#FF9800',
                        neutral: {
                            100: '#F5F7FA',
                            200: '#E4E7ED',
                            300: '#C0C6CF',
                            400: '#909399',
                            500: '#606266',
                            600: '#303133',
                        },
                        gradient: {
                            primary: 'linear-gradient(135deg, #1E88E5 0%, #42A5F5 100%)',
                            secondary: 'linear-gradient(135deg, #388E3C 0%, #4CAF50 100%)',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02)',
                        'card-hover': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
                        'dropdown': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
                    },
                    animation: {
                        'float': 'float 6s ease-in-out infinite',
                        'fade-in': 'fadeIn 0.5s ease-in-out',
                        'slide-up': 'slideUp 0.4s ease-out',
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' },
                        },
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(20px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' },
                        }
                    }
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .card-hover-effect {
                @apply transition-all duration-300 hover:shadow-card-hover hover:-translate-y-1;
            }
            .btn-primary {
                @apply bg-primary text-white font-medium rounded-lg px-6 py-3 shadow-md hover:shadow-lg hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2 transition-all duration-300 flex items-center justify-center;
            }
            .btn-secondary {
                @apply bg-white text-primary border border-primary font-medium rounded-lg px-6 py-3 shadow-sm hover:bg-primary/5 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 transition-all duration-300;
            }
            .status-badge {
                @apply inline-block text-xs font-bold px-3 py-1 rounded-full text-white mb-2;
            }
            .activity-tag {
                @apply inline-block px-2.5 py-0.5 rounded-full text-xs font-medium mb-2;
            }
            .tab-active {
                @apply text-primary border-b-2 border-primary;
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral-100 text-neutral-600 min-h-screen flex flex-col">

<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
            <!-- Logo -->
            <div class="flex items-center">
                <a href="#" class="flex items-center">
                    <i class="fa fa-heart-o text-primary text-2xl mr-2"></i>
                    <span class="text-xl font-bold text-primary">爱心志愿者平台</span>
                </a>
            </div>

            <!-- 主导航 -->
            <nav class="hidden md:flex space-x-8">
                <a href="${pageContext.request.contextPath}/organization/home" class="text-neutral-500 font-medium hover:text-primary transition-custom">首页</a>
                <a href="${pageContext.request.contextPath}/organization/profile" class="text-neutral-500 font-medium hover:text-primary transition-custom">机构资料</a>
                <a href="${pageContext.request.contextPath}/organization/guanli" class="text-primary font-medium hover:text-primary/80 transition-custom border-b-2 border-primary">活动管理</a>

            </nav>

            <!-- 用户信息和操作 -->
            <div class="flex items-center space-x-4">
                <div class="relative">
                    <button class="flex items-center text-neutral-500 hover:text-primary transition-custom" id="notificationBtn">
                        <i class="fa fa-bell-o text-xl"></i>
                        <span class="absolute -top-1 -right-1 bg-accent text-white text-xs rounded-full h-4 w-4 flex items-center justify-center animate-pulse">3</span>
                    </button>
                </div>

                <div class="relative group">
                    <button class="flex items-center space-x-2 focus:outline-none" id="userMenuBtn">
                        <img src="${pageContext.request.contextPath}/${organizations.logo != null ? organizations.logo : 'static/images/default-logo.png'}" alt="机构Logo" class="h-8 w-8 rounded-full object-cover border-2 border-primary">
                        <span class="hidden md:block text-sm font-medium">${organizations.org_name}</span>
                        <i class="fa fa-angle-down text-neutral-400 group-hover:text-primary transition-custom"></i>
                    </button>

                    <!-- 用户下拉菜单 -->
                    <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-dropdown py-1 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50 transform origin-top-right scale-95 group-hover:scale-100">
                        <a href="${pageContext.request.contextPath}/organization/profile" class="block px-4 py-2 text-sm text-neutral-600 hover:bg-primary hover:text-white transition-custom">
                            <i class="fa fa-building mr-2"></i>机构资料
                        </a>


                        <div class="border-t border-neutral-200 my-1"></div>
                        <a href="${pageContext.request.contextPath}/index.jsp" class="block px-4 py-2 text-sm text-red-500 hover:bg-red-50 transition-custom">
                            <i class="fa fa-sign-out mr-2"></i>退出登录
                        </a>
                    </div>
                </div>

                <!-- 移动端菜单按钮 -->
                <button type="button" class="md:hidden text-neutral-500 hover:text-primary focus:outline-none" id="mobileMenuBtn">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </div>
</header>

<!-- 活动管理内容 -->
<section class="py-10 bg-white">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-700 mb-4 md:mb-0">活动管理</h2>
            <div class="flex flex-wrap gap-3">
                <div class="relative">
                    <input type="text" placeholder="搜索活动..." class="pl-10 pr-4 py-2 rounded-lg border border-neutral-200 focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none w-full md:w-64 transition-custom">
                    <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400"></i>
                </div>
                <!-- 添加新活动链接 -->
                <a href="${pageContext.request.contextPath}/users/organization/addactivity" class="btn-primary flex items-center">
                    <i class="fa fa-plus mr-2"></i>添加新活动
                </a>

            </div>
        </div>





        <!-- 合并显示所有活动 -->
        <c:forEach var="activity" items="${activities}" varStatus="status">
            <div class="bg-white rounded-xl shadow-card p-6 border border-neutral-200 card-hover-effect animate-fade-in" style="animation-delay: ${status.index * 0.1}s">
                <div class="mb-3">
                    <c:if test="${activity.status == '进行中'}">
                        <span class="status-badge bg-green-500">进行中</span>
                    </c:if>
                    <c:if test="${activity.status == '未开始'}">
                        <span class="status-badge bg-blue-500">未开始</span>
                    </c:if>
                    <c:if test="${activity.status == '已结束'}">
                        <span class="status-badge bg-gray-500">已结束</span>
                    </c:if>
                </div>
                <h3 class="text-lg font-semibold text-neutral-700 mb-2">${activity.title}</h3>
                <p class="text-sm text-neutral-500 mb-4 line-clamp-3">${activity.description}</p>
                <div class="flex flex-wrap gap-3 mb-4">
                    <div class="flex items-center text-sm text-neutral-500">
                        <i class="fa fa-calendar mr-2"></i>
                        <span>${activity.startTime}</span>
                    </div>
                    <div class="flex items-center text-sm text-neutral-500">
                        <i class="fa fa-map-marker mr-2"></i>
                        <span>${activity.location}</span>
                    </div>
                    <div class="flex items-center text-sm text-neutral-500">
                        <i class="fa fa-users mr-2"></i>
                        <span>${activity.currentVolunteers}人报名</span>
                    </div>
                </div>
                <div class="pt-4 border-t border-neutral-200">
                    <div class="flex justify-between items-center">
                        <!-- 编辑活动链接 -->
                        <form action="${pageContext.request.contextPath}/organization/editActivity/${activity.activityId}" method="get">
                            <!-- 表单字段 -->
                            <button type="submit">编辑</button>
                        </form>

                        <!-- 删除活动链接 -->
                        <form action="${pageContext.request.contextPath}/organization/deleteActivity" method="post">
                            <input type="hidden" name="activityId" value="${activity.activityId}">
                            <button type="submit">删除</button>
                        </form>
                    </div>
                </div>
            </div>
        </c:forEach>

    </div>
    </div>

    <!-- 空状态显示 -->
    <div id="empty-state" class="hidden py-16 text-center">
        <div class="w-16 h-16 mx-auto mb-4 bg-neutral-100 rounded-full flex items-center justify-center">
            <i class="fa fa-calendar-o text-2xl text-neutral-400"></i>
        </div>
        <h3 class="text-lg font-medium text-neutral-600 mb-2">暂无活动</h3>
        <p class="text-sm text-neutral-500 mb-6">还没有创建任何活动，点击下方按钮创建一个新活动。</p>
        <!-- 添加新活动链接 -->
        <a href="${pageContext.request.contextPath}/users/organization/addactivity" class="btn-primary inline-flex">
            <i class="fa fa-plus mr-2"></i>添加新活动
        </a>
    </div>
    </div>
</section>

<!-- JavaScript -->
<script>
    // 导航栏滚动效果
    window.addEventListener('scroll', function() {
        const navbar = document.getElementById('navbar');
        if (window.scrollY > 50) {
            navbar.classList.add('shadow-md');
            navbar.classList.add('bg-white/95');
            navbar.classList.add('backdrop-blur-sm');
        } else {
            navbar.classList.remove('shadow-md');
            navbar.classList.remove('bg-white/95');
            navbar.classList.remove('backdrop-blur-sm');
        }
    });

    // 移动端菜单切换
    document.getElementById('mobileMenuBtn').addEventListener('click', function() {
        const mobileMenu = document.getElementById('mobile-menu');
        mobileMenu.classList.toggle('hidden');
    });

    // 确认删除活动
    function confirmDelete(activityId) {
        if (confirm("确定要删除该活动吗？此操作不可撤销。")) {
            window.location.href = "${pageContext.request.contextPath}/organization/deleteActivity/" + activityId;
        }
    }

    // 活动分类标签切换
    document.addEventListener('DOMContentLoaded', function() {
        const tabButtons = document.querySelectorAll('[data-tab]');
        const tabContents = document.querySelectorAll('.tab-content');
        const emptyState = document.getElementById('empty-state');

        // 初始显示全部活动
        document.getElementById('all-activities').classList.remove('hidden');

        // 检查是否有活动
        checkGlobalEmptyState();

        // 标签切换事件
        tabButtons.forEach(button => {
            button.addEventListener('click', () => {
                // 更新按钮状态
                tabButtons.forEach(btn => btn.classList.remove('tab-active'));
                button.classList.add('tab-active');

                // 显示对应内容
                const tabId = button.getAttribute('data-tab');
                tabContents.forEach(content => {
                    content.classList.add('hidden');
                });

                const activeContent = document.getElementById(`${tabId}-activities`);
                activeContent.classList.remove('hidden');

                // 检查当前活动内容是否为空
                checkCurrentTabEmptyState(activeContent);
            });
        });
    });

    // 检查当前标签内容是否为空
    function checkCurrentTabEmptyState(content) {
        const emptyState = document.getElementById('empty-state');

        if (content.children.length === 0) {
            emptyState.classList.remove('hidden');
        } else {
            emptyState.classList.add('hidden');
        }
    }

    // 检查全局空状态
    function checkGlobalEmptyState() {
        const allActivities = document.getElementById('all-activities');
        const emptyState = document.getElementById('empty-state');

        if (allActivities.children.length === 0) {
            emptyState.classList.remove('hidden');
        } else {
            emptyState.classList.add('hidden');
        }
    }

</script>
</body>
</html>